<template>
	<view class="orderInfoBox">
		<n-loading></n-loading>
		<image class="titleBg" src="https://lovebirdopen.com/static/img/cBj/liquorCardBj.png"></image>
		<view v-if="orderInfo">
			<!-- 订单状态 -->
			<view class="orderStatesBox">
				<view class="orderStates">
					<view class="">待付款</view>
				</view>
				<view class="orderStatesR">支付剩余
					<u-count-down :timestamp="countDown" :show-days="false" separator="zh" bg-color="transparent" color="#fff" separator-color="#fff" separator-size="24" font-size="24"></u-count-down>
				</view>
			</view>
			<!-- 地址 -->
			<view class="takeGoodsTips">
				<view class="tipsContBox" v-if="orderInfo.is_offline==0">
					<u-icon name="map" color="#333333" size="48"></u-icon>
					<view class="tipsCont">
						<view class="tipsContTit">
							<text>{{orderInfo.ship_name}}</text>
							<text>{{orderInfo.ship_phone}}</text>
						</view>
						<view class="tipsContInfo">{{orderInfo.detail_address}}</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="infoContBox">
					<view class="shopInfo">
						<dh-image class="shopLogo" :src="orderInfo.store.logo==null?'../../static/img/vector.svg':orderInfo.store.logo"
						 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						  {{orderInfo.store.name}}
					</view>
					
					<view class="goodsCont" v-for="(goods,index) of orderInfo.items">
						<dh-image class="niccImg" :src="goods.image"
						 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						<view class="goodsInfo">
							<view class="tit">
								<view class="titleft ellipsis">{{goods.name}}</view>
								
							</view>
							<view class="specsBox">
								<view class="specs">{{goods.specs}}</view>
							</view>
							<view class="priceBox">
								<view class="price">￥{{goods.price}}</view>
								<text>×{{goods.num}}</text>
							</view>
						</view>
					</view>
					
					<view class="detailsEach">订单金额<text>￥{{orderInfo.order_amount}}</text></view>
					<view class="detailsEach" v-if="orderInfo.is_offline==0">运费<text>￥0.00</text></view>
					<view class="detailsEach">优惠金额<text>-￥{{orderInfo.order_pmt==null?'0':orderInfo.order_pmt}}</text></view>
					<view class="detailsEach">金币抵扣<text>-￥{{orderInfo.order_pmt==null?'0':orderInfo.order_pmt}}</text></view>
					<view class="detailsEach">高粱穗抵扣<text>-￥{{orderInfo.order_pmt==null?'0':orderInfo.order_pmt}}</text></view>
					<view class="detailsEach">实付款<text class="orange">￥{{orderInfo.pay_amount}}</text></view>
					
				</view>
				
				<!-- 订单详情 -->
				<view class="orderDetails">
					<view class="detailsEach">订单编号：<text>{{orderInfo.id}}</text></view>
					<view class="detailsEach boxShadow">下单时间：<text>{{getdate(orderInfo.created_at,1)}}</text></view>
					<view class="detailsEach">收货方式：<text>{{orderInfo.is_offline==1?(orderInfo.goodsOwner.is_nomal_virtual==2?'到店消费':'门店自提'):'线上发货'}}</text></view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="handleBox" :style="{paddingBottom:isIphoneX?'40rpx':''}">
				<!-- /fun/order/deal-address -->
				<button @tap="confirmShowGo">取消订单</button>
				<button v-if="orderInfo.is_offline==0" @tap="changeAddress">修改地址</button>
				<button class="goPay" @tap="goPay">去支付</button>
			</view>
		</view>
		
		
		<!-- <view class="">{{errCont+','+errCont1+','+errCont2+','+errCont3+','+errCont4+','+errCont5+','+errCont6+','+errCont7}}</view> -->
		<!-- 取消订单确认 -->
		<u-modal v-model="confirmShow" :content="confirmCont" @confirm="cancelOrderGo" :show-cancel-button="true" :show-title="false"></u-modal>
	
		<!-- 从商家扫码进入需要授权弹窗 -->
		<u-popup v-model="storerShow" mode="bottom" border-radius="16">
			<view class="loginBox">
				<author-login height="88rpx" bgColor="#FF5238" fontColor="#fff" title="微信授权登录" borderRadius="58rpx"></author-login>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				orderInfo:null,
				confirmShow:false,
				confirmCont:'',
				countDown:null,
				order_id:null,
				storerShow:false,
				storerOrderId:{
					orderId:null,
					storer:null
				}
			}
		},
		onShow(){
			this.getOrderInfo(this.order_id)
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.order_id = option.id;
		},
		methods: {
			getOrderInfo(id){
				this.apiget('/fun/order/view',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderInfo = res.data.data;
						this.countDown = res.data.data.termOfValidity-this.dateDiff(res.data.data.created_at);
					}
				})
			},
			// 支付
			goPay(){
				var _this = this;
				this.apiget('/fun/pay/pay-params',{order_id:this.order_id,payment_code :'wechatpay',payment_type :'lite'}).then(res =>{
					if(res.data.status == 200 ) {
						var payData = res.data.data;
						payData.provider='wxpay';
						payData.success=function (res) {
							console.log('success:' + JSON.stringify(res));
							uni.navigateTo({
								url: './paySuccess?id='+_this.order_id
							});
						};
						payData.fail=function (err) {
							console.log('fail:' + JSON.stringify(err));
						};
						uni.requestPayment(payData);
					}
				})
			},
			// 修改地址
			changeAddress(){
				uni.navigateTo({
					url: '../address/address?oId='+this.order_id
				});
			},
			confirmShowGo(){
				this.confirmCont = '确定取消订单？';
				this.confirmShow = true;
			},
			cancelOrderGo(e){
				var _this = this;
				this.apipost('/fun/order/cancel',{id:this.order_id}).then(res =>{
					if(res.data.status == 200 ) {
						uni.showToast({
							icon: 'success',
							duration:1000,
							title: '订单取消成功',
							success: res => {
								setTimeout(function (){
									uni.navigateBack({
									    delta: 1
									});
								}, 1000);
							},
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.loginBox{
		padding: 32rpx;
	}
	.orderInfoBox{
		min-height: 100%;
		padding-bottom: 160rpx;
		background-color: #F8F8FA;
	}
	.titleBg{
		width: 100%;
		height: 200rpx;
		position: absolute;
		top: 0;
		left:0;
	}
	.orderStatesBox{
		position: relative;
		display: flex;
		align-items: center;
	}
	.orderStates{
		flex: auto;
		padding: 20rpx 32rpx;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #fff;
		
		.orderStatesTips{
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}
	.orderStatesR{
		flex: auto;
		padding-right: 32rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: right;
	}
	.takeGoodsTips{
		position: relative;
		padding: 0 32rpx;
		
		.tipsContBox{
			// min-height: 100rpx;
			padding: 24rpx 32rpx;
			display: flex;
			background-color: #fff;
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.02);
			border-radius: 16rpx;
			
			.tipsCont{
				flex: auto;
				margin-left: 32rpx;
				
				.tipsContTit{
					font-size: 32rpx;
					line-height: 48rpx;
					color: #333;
					
					text{
						margin-right: 20rpx;
					}
				}
				.tipsContInfo{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666;
				}
			}
		}
	}

	.orderDetails{
		padding: 26rpx 32rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.detailsEach{
			padding: 18rpx 0;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
			
			text{
				color: #333333;
				font-weight: bold;
			}
		}
		.boxShadow{
			box-shadow: inset 0px -0.5px 0px #F5F5F5;
		}
	}
	.handleBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 18rpx 32rpx;
		text-align: right;
		background-color: #fff;
		
		button{
			background-color: inherit;
			display: inline-block;
			height: 60rpx;
			padding: 0 40rpx;
			margin-right: 16rpx;
			color: #666666;
			font-size: 24rpx;
			line-height: 60rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			border: 2rpx solid #999999;
			
		}
		.goPay{
			color: #fff;
			background: linear-gradient(276.81deg, #FF5238 8.46%, #FFA360 89.67%), #FF5238;
			border:none;
			// border: 2rpx solid #FF5238;
		}
	}
	.infoContBox{
		padding: 24rpx 24rpx 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		.orderTiem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;
		}
		
		.cardMan{
			display: flex;
			margin-bottom: 16rpx;
			line-height: 52rpx;
			
			.tit{
				flex: 1;
				width: 1px;
				font-size: 32rpx;
				font-weight: 900;
				color: #333333;
			}
		}
		
		
		.shopInfo{
			display: flex;
			padding-bottom: 24rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			
			.shopLogo{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		
		.goodsCont{
			padding: 24rpx;
			margin-bottom: 8rpx;
			display: flex;
			background: rgba(64, 169, 255, 0.1);
			border-radius: 16rpx;
			
			.niccImg {
				width:120rpx;
				height: 120rpx;
				margin-right: 24rpx;
				border-radius: 8rpx;
			}
			
			.goodsInfo{
				flex: auto;
				
				.tit{
					display: flex;
					margin-bottom: 16rpx;
					font-size: 24rpx;
					color: #666;
					line-height: 40rpx;
					
					.titleft{
						flex: auto;
						width: 1px;
					}
				}
				
				.specsBox{
					display: flex;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #999;
					
					.specs{
						flex: auto;
					}
				}
				
				.priceBox{
					display: flex;
					margin-top: 8rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #333333;
					
					.price{
						flex: auto;
					}
					
					text{
						color: #999999;
					}
				}
			}
		}
		
		
		.detailsEach{
			padding: 18rpx 0;
			font-size: 26rpx;
			line-height: 40rpx;
			color: #333;
			
			text{
				float: right;
				font-weight: bold;
			}
		}
		.detailsEach2{
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;
			font-weight: bold;
			
			text{
				float: right;
			}
		}
		.orange{
			color: #FF5238;
		}
		.borderLine{
			padding-bottom: 25rpx;
			margin-bottom: 16rpx;
			border-bottom: 2rpx solid #EEEFF3;
		}
	}
</style>
